---
title: <AccountsCard />
description: Displays and manages linked social accounts
---

## Import

```tsx
import { AccountsCard } from "@better-auth/ui-react/components"
```

## Usage

```tsx
<AccountsCard />
```

## Props

| Name           | Type                         | Default     | Description                                |
|----------------|------------------------------|-------------|--------------------------------------------|
| `className`    | `string`                     | `undefined` | Additional CSS classes for styling         |
| `classNames`   | `SettingsCardClassNames`     | `undefined` | Class names for individual card components |
| `localization` | `Partial<AuthLocalization>`  | `undefined` | Localization object for translations       |

## Example

```tsx
import { AccountsCard } from "@better-auth/ui-react/components"

export function AccountSettings() {
    return (
        <div className="space-y-4">
            <AccountsCard />
        </div>
    )
}
```

## Features

- View all linked social accounts (Google, GitHub, Discord, etc.)
- Link new social accounts
- Unlink existing social accounts
- Shows provider icons and account information
- Built-in loading states
- Prevents unlinking if it's the only authentication method 